<style>
	.body{
		background: #f2f2f2;
		height: 100%;
		width: 100%;
	}
	.order-list-content{
		height: 290rpx;
		width: 100%;
		background: #fff;
		margin-top: 10rpx;
	}
	.order-list{
		width: 95%;
		margin: 0 auto;
		height: 100%;
	}
	.diff-head{
		height: 64rpx;
		line-height: 64rpx;
		border-bottom: 2rpx solid #ececec;
		color: #8b8b8b;
		font-size: 26rpx;
	}
	.order-no{
		float: left;
		width: 70%;
		text-indent: 12rpx;
	}
	.order-state{
		float: right;
	}
	.order-goods {
		height: 225rpx;
		width: 100%;
		margin-top: 16rpx;
	}
	.goods-img{
		float: left;
		width: 140rpx;
		height: 187rpx;
		border: 2rpx solid #d4d4d4;
		margin-right: 12rpx;
		overflow: hidden;
	}
	.goods-img image{
		height: 100%;
		width: 100%;
	}
	.goods-info{
		float: left;
		overflow: hidden;
		width: 523rpx;
		position: relative;
		height: 187rpx;
	}
	.goods-name{
		font-size: 26rpx;
		color: #000;
		margin-top: 19rpx;
		height: 68rpx;
		overflow: hidden;
	}
	.goods-attr{
		height: 34rpx;
		margin-top: 10rpx;
	}
	.goods-attr text{
		color: #8b8b8b;
		font-size: 26rpx;
	}
	.text-attr{
		float: left;
	}
	.text-number{
		float: right;
	}
	.goods-price{
		font-size: 26rpx;
		color: #4b4b4b;
		position: absolute;
		z-index: 9;
		right: 0rpx;
		top: 58rpx;
		background: #fff;
		padding-left:25rpx;
	}
	.order-desc{
		height: 50rpx;
		line-height: 50rpx;
		width: 100%;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}
	.order-describe{
		width: 60%;
	}
	.diff-btn{
		width: 136rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #fff;
		background: #f47a7a;
		line-height: 46rpx;
		border-radius: 5rpx;
		display: block;
	}
	.m-no-data image{
		width: 100%;
		height: 100%;
	}
</style>
<template>
	<view class="body">
		<view class="order-list-content" v-for="(item,index) in diff_list" :key="index">
			<view class="order-list">
				<view class="diff-head">
					<view class="order-no">
						订单号：{{item.order_no}}
					</view>
					<view class="order-state">{{item.state_text}}</view>
				</view>
				<view class="order-goods">
					<view class="goods-img"><image :src="item.goods_img"></image></view>
					<view class="goods-info">
						<view class="goods-name">{{item.goods_name}}</view>
						<view class="goods-price">￥{{item.shop_price}}</view>
						<view class="goods-attr">
							<text class="text-attr">{{item.item_names}}</text>
							<text class="text-number">x {{item.buy_num}}</text>
						</view>
						<view class="order-desc">
							<view class="order-describe">
								<text v-if="item.state != '3'">
									<text v-if="item.state == '0'">
										<text v-if="item.make_type == '1'">需补差价：</text>
										<text v-else="">待退差价：</text>
									</text>
									<text v-else-if="item.state == '1'">已补差价：</text>
									<text v-else-if="item.state == '2'">已退差价：</text>
									￥{{item.pay_price}}
								</text>
								<text v-else>无效订单</text>
							</view>
							<view class="diff-btn" v-if="item.make_type == '1' && item.pay_status == '0' && item.state!='3'">
								<navigator open-type="navigate" :url="'/pages/jewel/order/order_diff?diff_id=' + item.id">去补差价</navigator>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata">
			<image src="../../../static/images/no_data.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import hl from '@/common/common_zb.js';
	export default {
		data() {
			return {
				diff_list: [],	// 列表
				bIsShowLoading: false,
				page: 1,
				total_pages: 1,
				showNodata: false
			}
		},
		onLoad() {
			this.get_list();
		},
		// 上拉加载
		onReachBottom(){
			this.loadtype = 'plus';
			this.page++;
			this.get_list();
		},
		methods: {
			get_list(){
				let that = this;
				if(that.page <= that.total_pages){
					that.bIsShowLoading = true;
					hl.get('order/diff_list', {page: that.page}, false, function (res){
						let resdata = res.data;
						if(resdata.count == 0) {
							that.showNodata = true;
						}else{
							if(that.loadtype == 'plus') {
								that.diff_list = that.diff_list.concat(resdata.data);
							}else{
								that.diff_list = resdata.data;
								that.total_pages = resdata.total_pages;
							}
						}
						that.bIsShowLoading = false;
					})
				}
			}
		}
	}
</script>

<style>

</style>
